<template>
  <div id="app">

    <!-- 安装插件 yarn add postcss-px-to-viewport@1.1.1 -D   vart-ui 官网 - 进阶用法 -->
    <!-- postcss 代码 -->
    <!-- 加上 css 样式，然后在浏览器右键检查中把屏幕宽度改为 375 -->
    <!-- 检查元素可以看到盒子是 300*300 px，但是元素的样式是 80 vw -->
    <!-- 转换公式：300 / 375 * 100 -->
    <!-- <div class="box"></div> -->

    <!-- 测试代码 -->
    <!-- <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-switch v-model="checked" />
    <van-rate v-model="score" allow-half></van-rate> -->

    <router-view>
    </router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // switch 组件测试
      // checked: true,
      // score: 5
    }
  }
}
</script>

<style lang="less">
/* .box {
  width: 300px;
  height: 300px;
  background-color: pink;
} */
</style>
